import React, {Component} from 'react';
import { View, Text,Image,ImageBackground,StyleSheet,TouchableOpacity } from "react-native";

export default class TopBar extends Component{
	rightPress(page){
		if(this.props.navigation){
			this.props.navigation.push(page)
		}
	}
	_back(){
		let navigation = this.props.navigation
		if(navigation){
			console.log("="+navigation.state.routeName+'=')
			if(navigation.state.routeName!=''){
				this.props.navigation.pop()
			}
		}
	}
	render(){
		// {/*()=>{this.rightPress(this.props.page)}*/}
		return(
			<View  style={styles.bar}>
				{this.props.navigation.state.routeName!='home'?
					<TouchableOpacity  activeOpacity={0.5}   
						hitSlop={{top: 5, left: 10, bottom: 5, right: 10}}
						style={styles.left} 
						onPress={()=>{this._back()}}>
						<Image style={styles.backImg} source={require('../images/back-icon.png')}/>
					</TouchableOpacity>
					:<View style={styles.left}></View>
				}
		    <Text style={styles.title}>{this.props.title}</Text>

				<TouchableOpacity activeOpacity={0.5}  onPress={this.props.rightPress}
					style={[styles.left,{marginLeft:0,marginRight:15,width:40}]}>
					{this.props.rightTitle?<Text style={styles.rightText}>{this.props.rightTitle}</Text>:null}
				</TouchableOpacity>
		  </View>
		)
	}
}
const styles = StyleSheet.create({
	rightText:{
		color:'white',
		fontSize:15,
	},	
	backImg:{
		resizeMode:'contain',
		width: '100%',
		height: '100%',
	},
	left:{
		width: 14,
		height: 26,
		justifyContent:'center',
		alignItems:'center',
		marginLeft:20,
		marginRight:21,
	},
	title:{
		color:'white',
		fontSize:20,
		flex:1,
		textAlign:'center',
		marginRight:55,
	},
	bar:{
		width: '100%', 
		height: '100%',
		flexDirection:'row',
		justifyContent:'space-between',
		alignItems:'center',
		//borderWidth:1,
	}

})